<!--
 * @Descripttion:
 * @version:
 * @Author: zhuzm@linkstec.com
 * @Date: 2023-02-02 17:51:17
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-05-19 17:16:17
-->
<template>
  <div>
    <div class="content-item" v-if="tableData.WEALTH.totalCount>0">
      <div class="left-item">
        <div class="scroll-item">
          <ListProduct
            :isProduct="true"
            :data="tableData.WEALTH.list"
            v-model="activateCode"
            @input="lookFundDetail"
            @empty="emptyFundDetail"
          />
        </div>
      </div>
      <div class="right-item">
        <div class="default-item" v-if="activateCode === ''">
          <div class="title-item">
            <i class="section-title-line"></i>
            <span>产品研究</span>
          </div>
          <div class="for-list" @click.stop="jumpYb('产品分析报告')">
            <img src="@/assets/img/header/product/analysis.png" alt="">
            <span>产品分析报告</span>
          </div>
          <div class="for-list" @click.stop="jumpYb('私募之窗')">
            <img src="@/assets/img/header/product/privateEquity.png" alt="">
            <span>私募之窗</span>
          </div>
          <div class="for-list" @click.stop="jumpYb('基金公司专区')">
            <img src="@/assets/img/header/product/company.png" alt="">
            <span>基金公司专区</span>
          </div>
        </div>
        <div class="details-item" v-if="activateCode">
          <div class="title-item">
            <span>{{ basicInfo.prod_name }}</span>
            <span>（{{ basicInfo.prod_code }}）</span>
          </div>
          <div class="time-time">
            <span>最新时间：{{ basicInfo.nav_date | moment('YYYYMMDD','YYYY-MM-DD') }}</span>
          </div>
          <el-row :gutter="0" class="row-item">
            <el-col :span="12" class="col-for">
              <div class="grid-content">
                <span class="label-text">日涨跌幅</span>
                <div class="value-text" :class="{'red-text': Number(basicInfo.comm_1d) >= 0,'green-text': Number(basicInfo.comm_1d) < 0}">
                  {{ basicInfo.comm_1d || '-' }}%
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="col-for">
              <div class="grid-content">
                <span class="label-text">近3个月涨跌幅</span>
                <div class="value-text" :class="{'red-text': Number(basicInfo.comm_3m) >= 0,'green-text': Number(basicInfo.comm_3m) < 0}">
                  {{ basicInfo.comm_3m || '-' }}%
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="col-for">
              <div class="grid-content">
                <span class="label-text">单位净值</span>
                <span class="value-text">{{ basicInfo.nav || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12" class="col-for">
              <div class="grid-content">
                <span class="label-text">累计净值</span>
                <span class="value-text">{{ basicInfo.tot_nav || '-' }}</span>
              </div>
            </el-col>
          </el-row>
          <div class="list-item">
            <span class="lebel-item">基金类型</span>
            <el-link class="value-item green-item" type="primary" :underline="false">
              <span @click="toFundList(basicInfo)">{{ basicInfo.type2_name || '-' }}</span>
              | {{ basicInfo.stl_risk_type | TransByList(dictionary.STL_RISK_TYPE) }}</el-link>
          </div>
          <div class="list-item">
            <span class="lebel-item">成立日</span>
            <span class="value-item">{{ basicInfo.found_date | moment('YYYYMMDD','YYYY-MM-DD') }}</span>
          </div>
          <div class="list-item">
            <span class="lebel-item">基金规模</span>
            <span class="value-item">{{ basicInfo.net_asset }}亿</span>
          </div>
          <div class="list-item">
            <span class="lebel-item">管理人</span>
            <span class="value-item green-item"><el-link type="primary" :underline="false" @click="jumpFundcompany(basicInfo.companycode)">{{ basicInfo.manager_person_des }}</el-link></span>
          </div>
          <div class="list-item last-list-item">
            <span class="lebel-item">基金经理</span>
            <span class="value-item">{{ basicInfo.fund_man }}</span>
          </div>
          <div class="buttom-item">
            <div class="buttom-for">
              <el-button type="primary" size="small" @click="buyAction(basicInfo)" v-if="basicInfo.sub_sta === '1'" v-permission.disabled="'trade'">立即申购</el-button>
              <el-button type="primary" size="small" @click="buyAction(basicInfo)" v-if="basicInfo.ref_sta === '1'" v-permission.disabled="'trade'">立即认购</el-button>
            </div>
            <div class="buttom-for">
              <el-button
                size="small"
                type="primary"
                v-permission.disabled="'selfSelected'"
                @click="addSeletAction(basicInfo)"
                :icon="basicInfo.selfprod === '1' ? null : `el-icon-plus`">{{ basicInfo.selfprod === '1' ? `已自选` : `添加自选` }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="tableData.WEALTH.totalCount == 0">
      <el-empty></el-empty>
    </template>
  </div>
</template>
<script>
import PermissionMixin from '@/mixins/PermissionMixin';
import FundActionMixin from '@/mixins/FundActionMixin';
import ListProduct from '../components/ListProduct';
import { mapGetters } from 'vuex';
export default {
  components: {
    ListProduct
  },
  mixins: [PermissionMixin, FundActionMixin],
  props: {
    tableData: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data () {
    return {
      searchType: 'product',
      activateCode: '', // 当前激活产品的code
      basicInfo: '' // 基金详情数据
    };
  },
  computed: {
    ...mapGetters({
      dictionary: 'dictionary/get'
    }),
    industryData () {
      return this.$store.state.investigate.industryData || [];
    },
    // 组装树形结构行业数据
    industryDataTree () {
      let arr = [];
      if (this.industryData.length > 0) {
        arr = this.industryData.filter((item) => {
          const childArr = this.industryData.filter((child) => child.pid === item.rguid);
          item.children = childArr.length > 0 ? childArr : [];

          return !item.pid;
        });
      }
      return arr;
    },
    // 简单实现瀑布流数据
    industryWaterfullData () {
      if (this.industryDataTree.length > 0) {
        const result = Array(5)
          .fill(1)
          .map((item, index) => {
            return { id: index, count: 0, data: [] };
          });

        this.industryDataTree.forEach((item) => {
          const obj = this.getMinCountData(result);
          obj.count += item.children.length + 2; // +2 每一个父亲元素约占位2个子元素高度
          obj.data.push(item);
        });

        return result.sort((a, b) => a.id - b.id);
      }
      return [];
    }
  },
  created () {
    if (this.industryData.length === 0) {
      this.$store.dispatch('getIndustryData');
    }
  },
  methods: {
    lookFundDetail () {
      if (!this.activateCode) return;
      this.$api.fundDetail.getBaseInfo({
        PROD_CODE: this.activateCode
      }, { showLoading: 0 }).then(res => {
        const data = res.data || {};
        this.basicInfo = data || {};
      });
    },
    emptyFundDetail () {
      this.activateCode = '';
    },
    buyAction (row) {
      const { href } = this.$router.resolve({
        path: '/order/buy',
        query: {
          from: 'publicfund',
          prodCode: row.pro_code
        }
      });
      window.open(href, '_blank');
    },
    // 自选操作
    addSeletAction (row) {
      if (row.selfprod === '1') { // 已添加购物车直接跳
        this.FundAction_toSelect(1);
      } else { // 未添加购物车先添加
        this.FundAction_addSelect(row.pro_code, row.pro_name, row.type1_code, this.lookFundDetail.bind({ row }, { showSkeleton: 0, showLoading: 1 }));
      }
    },
    // 获取count最小对象
    getMinCountData (arr) {
      if (arr.length > 0) {
        return arr.sort((a, b) => {
          return a.count - b.count;
        })[0];
      }
    },
    jumpYb (name) {
      let yb = [];
      for (let i = 0; i < this.industryWaterfullData.length; i++) {
        for (let j = 0; j < this.industryWaterfullData[i].data.length; j++) {
          if (this.industryWaterfullData[i].data[j].industryName == '产品') {
            yb = this.industryWaterfullData[i].data[j].children;
          }
        }
      }
      const item = yb.filter(item => item.industryName === name)[0];
      const path = `/${item.industryName}?name=${item.industryName}&sources=${item.sources}&pid=${item.pid}&id=${item.rguid}`;
      if (name === '私募之窗' && localStorage.getItem('VINTEX_commit') !== '1') {
        this.$store.commit('updateShowCommitment', true);
        this.$store.commit('updatePathCommitment', process.env.VUE_APP_SERVICE_CP_NEWPRODUCTRESEARCH + path);
      } else {
        window.location.href = process.env.VUE_APP_SERVICE_CP_NEWPRODUCTRESEARCH + path;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.content-item{
  display: flex;
  .left-item{
    flex: 1;
    margin-right: 17px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
    .scroll-item{
      width: calc(100% - 4px);
      height: 415px;
      overflow-y: scroll;
    }
  }
  ::v-deep .scroll-item::-webkit-scrollbar {
    width: 12px; /*滚动条宽度*/
    height: 12px; /*滚动条高度*/
  }
  ::v-deep .scroll-item::-webkit-scrollbar-thumb {
    border-radius: 6px; /*滚动条的圆角*/
    background: rgba(212, 216, 229, 0.6); /*滚动条的背景颜色*/
  }
  .right-item{
    width: 306px;
    padding-top: 10px;
    .default-item{
      .title-item{
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .section-title-line{
          width: 6px;
          height: 18px;
          background-color: #2468F2;
          border-radius: 3px;
          margin-right: 8.5px;
        }
        span{
          font-weight: 500;
          font-size: 18px;
          color: #333333;
        }
      }
      .for-list{
        width: 263px;
        height: 48px;
        background: linear-gradient(180deg, #F2F6FD 2.66%, #FFFEFE 100%);
        border: 1px solid #E1E5EE;
        border-radius: 4px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        cursor: pointer;
        img{
          width: 20px;
          margin-left: 20px;
        }
        span{
          margin-left: 10px;
          font-weight: 700;
          font-size: 16px;
          color: #325993;
        }
      }
    }
    .details-item{
      .title-item{
        margin-bottom: 2px;
        span{
          font-weight: 700;
          font-size: 14px;
          line-height: 21px;
          color: #333333;
        }
      }
      .time-time{
        margin-bottom: 9px;
        span{
          font-weight: 400;
          font-size: 14px;
          line-height: 21px;
          color: #818181;
        }
      }
      .row-item{
        margin-bottom: 11px;
        border: 1px solid #D9D9D9;
        .col-for{
          box-sizing: border-box;
          .grid-content{
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .label-text{
              font-weight: 400;
              font-size: 12px;
              color: #7B7F8D;
              margin-bottom: 2px;
            }
            .value-text{
              font-weight: 500;
              font-size: 20px;
            }
            .label-text,.value-text{
              margin-left: 12px;
            }
          }
        }
        .col-for:nth-child(1){
          border-right: 1px solid #D9D9D9;
          .grid-content{
            background: linear-gradient(282.45deg, #FFECE6 -2.15%, rgba(255, 250, 249, 0.39) 99.1%);
          }
        }
        .col-for:nth-child(2){
          .grid-content{
            background: linear-gradient(282.45deg, #E0F7E5 -2.15%, rgba(253, 255, 249, 0.39) 99.1%);
          }
        }
        .col-for:nth-child(3){
          border-top: 1px solid #D9D9D9;
          border-right: 1px solid #D9D9D9;
          .grid-content{
            background: linear-gradient(282.45deg, #D5E5FC -2.15%, rgba(249, 252, 255, 0.39) 99.1%);
            .value-text{
              color: #333333;
            }
          }
        }
        .col-for:nth-child(4){
          border-top: 1px solid #D9D9D9;
          .grid-content{
            background: linear-gradient(282.45deg, #D5E5FC -2.15%, rgba(249, 252, 255, 0.39) 99.1%);
            .value-text{
              color: #333333;
            }
          }
        }
      }
      .list-item{
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        .lebel-item{
          font-weight: 400;
          font-size: 14px;
          color: #7B7F8D;
          margin-right: 8px;
        }
        .value-item{
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .green-item{
          color: #2468F2;
        }
      }
      .last-list-item{
        margin-bottom: 16px;
      }
      .buttom-item{
        display: flex;
        justify-content: center;
        .buttom-for{
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 82px;
          height: 32px;
          background: #3070D8;
          border-radius: 4px;
          span{
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
        }
        .buttom-for+.buttom-for{
          margin-left: 20px;
        }
      }
    }
  }
}
::v-deep .el-empty{
  padding: 0;
  .el-empty__image{
    width: 140px;
  }
}
</style>
